<template>
		
	<view class="login">
		<form @submit="formSubmit">
		<view class="content-wrapper">
			<view class="title">
				<h1>欢迎注册简客</h1>
			</view>
			
		
				<view class="login-form">
					<view class="login-form-items">
						<view class="login-form-items-title">  <image src="../../../static/login.png" style="width: 50rpx;height: 50rpx;"></image></view>
						<input type="text" class="login-input" name="username" placeholder="请输入用户名" />
					</view>
					<view class="login-form-items">
						<view class="login-form-items-title">  <image src="../../../static/nickname.png" style="width: 50rpx;height: 50rpx;"></image></view>
						<input type="text" class="login-input" name="name" placeholder="请输入昵称" />
					</view>
					
					<view class="login-form-items">
						<view class="login-form-items-title">  <image src="../../../static/email.png" style="width: 50rpx;height: 50rpx;"></image></view>
						<input id="mailId" @input="mailSet"  type="text" class="login-input" name="mail" placeholder="请输入邮箱" />
					</view>
					<!-- <view class="login-form-items">
						<view class="login-form-items-title">  <image src="../../../static/yzm.png" style="width: 50rpx;height: 50rpx;"></image></view>
						<input type="text"  name="code" placeholder="请输入邮箱验证码" />
					    <button type="primary" @click="getChekCode"><text>验证码</text></button>
					</view> -->
					<view class="login-form-items">
						<view class="login-form-items-title">  <image src="../../../static/pwd.png" style="width: 50rpx;height: 50rpx;"></image></view>
						<input type="password" class="login-input" name="password" placeholder="请输入密码" />
					</view>
				
					<view class="login-form-items">
						<view class="login-form-items-title"><image src="../../../static/repeatpsd.png" style="width: 50rpx;height: 50rpx;"></image></view>
						<input type="password" name="passwordRepeat" class="login-input"    placeholder="请重复登录密码" />
					</view>
				           
				</view>
			
		</view>
		<div class="submit-wrapper">
			<button type="primary" form-type="submit" class="login-btn">注册</button>
		</div>
		
		</form>
		
	</view>
</template>

<script>
		import http from '../../../common/request.js'
	export default {
		mounted() {
		},
		data() {
			return {
				mail:''
			};
		},
		methods:{
			async register(formdata) {
							const res = await http.request({
								url: '/sys_user/register',
								method:'POST',
								data:formdata
							})
						    if(res.data.code ==0){
								
								
								uni.redirectTo({
									url:'../index'
								})
							// 	let user = res.data.data
							
							// 	uni.setStorageSync('userKey',user)
							// 	uni.setStorageSync('authorization',user.authorization)
							// 	uni.switchTab({
							// 		url: '/pages/index/chat/chat',
							// 		animationType: 'pop-in',
							// 		animationDuration: 200
							// 	}); 
							}else{
								uni.showToast({
									title:'注册失败！'
								})
							}
						},
			
			
				formSubmit: function(e) {
					              if(e.detail.value.username==''||e.detail.value.username==undefined){
									  uni.showToast({
									  	title:'用户名不能为空！'
									  })
									  return false
								  }
								  if(e.detail.value.name==''||e.detail.value.name==undefined){
								  									  uni.showToast({
								  									  	title:'昵称不能为空！'
								  									  })
								  									  return false
								  }
								  if(e.detail.value.password==''||e.detail.value.password==undefined){
								  									  uni.showToast({
								  									  	title:'密码不能为空！'
								  									  })
								  									  return false
								  }
								  if(e.detail.value.passwordRepeat==''||e.detail.value.passwordRepeat==undefined){
								  									  uni.showToast({
								  									  	title:'请重复密码！'
								  									  })
								  									  return false
								  }
								  if(e.detail.value.mail==''||e.detail.value.mail==undefined){
								  									  uni.showToast({
								  									  	title:'邮箱不能为空！'
								  									  })
								  									  return false
								  }
								  // if(e.detail.value.code==''||e.detail.value.code==undefined){
								  // 									  uni.showToast({
								  // 									  	title:'验证码不能为空！'
								  // 									  })
								  // 									  return false
								  // }
								  if(e.detail.value.password!=e.detail.value.passwordRepeat){
								  									  uni.showToast({
								  									  	title:'密码不一致！'
								  									  })
								  									  return false
								  }
								let formdata = e.detail.value
								this.register(formdata)
								
								
							},
							formReset: function(e) {
								console.log('清空数据')
							},
							mailSet(event){
								this.mail=event.target.value
							},
							async getChekCode (){
								if(this.mail ==''||this.mail==undefined){
									uni.showToast({
										title:'邮箱不能为空！'
									})
									return false
								}
								const res = await http.request({
									url: '/sys_user/get_check_code?mail='+this.mail,
									method:'POST'
								})
								if(res.data.data){
									uni.showToast({
										title:'验证码发送成功！'
									})
								}else{
									uni.showToast({
										title:'验证码发送失败！'
									})	
								}
							}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F4F5F6;
	}

	.login {
		.content-wrapper {
			width: 100%;

			.title {
				margin-top: 10rpx;
				width: 100%;
				margin-bottom: 10px;

				h1 {
					border: 0px;
					width: 50%;
					margin: 0 auto;
					text-align: center;
					border-bottom: 1px solid #E3E3E3;
					line-height: 50px;
					font-size: 17px;
					overflow: hidden;
				}
			}

			.login-form {
				margin: 20px 10px 20px 15px;
				background: #FFFFFF;

				.login-form-items {
					padding: 15px 10px;
					border-bottom: 1px solid #F3F4F5;
					position: relative;
					display: -webkit-flex;
					display: flex;

					.login-form-items-title {
						width: 10%;
						line-height: 22px;
						flex-shrink: 0;
					}

					.login-input {
						width: 100%
					}
				}
			}
		}

		.submit-wrapper {
			padding: 10px;
			padding-top: 10px;
		}

	}
</style>

